<template>
	<!-- <TopBar>
		<text>个人中心</text>
	</TopBar> -->
	<view :style="`min-height: ${windowHeight}px;background-color: #F5F6FA;`">
		<view class="content">
			<view class="user-info" @click="getUserInfo">
				<up-image src="https://jqgh-public.yqfoodec.com/20250409/avatar_76231.png" height="120rpx" width="120rpx" v-if="!avatar"></up-image>
				<up-avatar :src="avatar" size="60" v-if="avatar"></up-avatar>
				<!-- <up-image :src="avatar" height="120rpx" width="120rpx"  v-if="avatar"></up-image> -->
				<view class="info-center" v-if="mobile">
					<view>{{!name ? '微信用户' : name}}</view>
					<view class="points">{{orgName}}</view>
				</view>
				<view v-if="!mobile" @click="handleToLogin" class="info-center">
					点击登录
				</view>
				<up-icon name="arrow-right" color="#292D32"></up-icon>
			</view>
			<up-gap height="20"></up-gap>
			<view class="nav-view">
				<up-row>
					<up-col span="3" v-for="(item, index) in navList" :key="index" @click="handleNav(item)">
						<view class="menu-item">
							<up-image :src="item.icon" height="70rpx" width="70rpx"></up-image>
							<view class="menu-name">{{item.name}}</view>
						</view>
					</up-col>
				</up-row>
			</view>
			<up-gap height="15"></up-gap>
			<view>
				<view class="message-view">
					<up-cell 
					icon="https://jqgh-public.yqfoodec.com/20250405/volume-high_69057.png" 
					title="您有一条新的消息"
					value="立即查看"
					titleStyle="color: #FF3B30"
					:border="false"
					isLink></up-cell>
				</view>
				<up-gap height="15"></up-gap>
			</view>
			<view class="menu-list">
				<up-cell-group :border="false">
					<!-- 帮助中心 改 常见问题 -->
					<up-cell icon="https://jqgh-public.yqfoodec.com/20250405/message-question_68768.png" title="常见问题" isLink name="help-center" :border="false" @click="handleMenu"></up-cell>
					<up-cell icon="https://jqgh-public.yqfoodec.com/20250405/book@2x_68818.png" title="操作手册" isLink name="undeveloped-page" :border="false" @click="handleMenu"></up-cell>
					<up-cell icon="https://jqgh-public.yqfoodec.com/20250405/security-user_68849.png" title="意见反馈" isLink name="feedback" :border="false" @click="handleMenu"></up-cell>
					<!-- <up-cell icon="phone" title="联系客服" isLink @click="callPhone"></up-cell> -->
					<up-cell icon="https://jqgh-public.yqfoodec.com/20250405/setting@2x_68872.png" title="账号设置" isLink name="account-settings" :border="false" @click="handleMenu"></up-cell>
				</up-cell-group>
			</view>
		</view>
	</view>
	
</template>

<script>
	import TopBar from '@/components/system/TopBar.vue'
	import storage from '@/utils/storage'
	
	export default {
		components: {
			TopBar
		},
		data() {
			return {
				name: this.$store.state.user.realName,
				orgName: this.$store.state.user.orgName,
				avatar: this.$store.state.user.avatar,
				mobile: this.$store.state.user.mobile,
				windowHeight: 0,
				navList: [
					{name: '我的活动', url: 'my-activity', icon: 'https://jqgh-public.yqfoodec.com/20250405/timer-start@2x_68283.png'},
					{name: '我的积分', url: 'my-points', icon: 'https://jqgh-public.yqfoodec.com/20250405/note-2_68310.png'},
					{name: '我的申请', url: 'application-record', icon: 'https://jqgh-public.yqfoodec.com/20250405/filter-edit@2x_68404.png'},
					{name: '我的消息', url: 'undeveloped-page', icon: 'https://jqgh-public.yqfoodec.com/20250405/note_68324.png'},
				]
			}
		},
		onLoad() {
			this.getsize()
		},
		onShow() {
			let userInfo = uni.getStorageSync('userInfo')
			this.name = userInfo.realName
			this.orgName = userInfo.orgName
			this.avatar = userInfo.avatar
			this.mobile = userInfo.mobile
		},
		methods: {
			getsize(){
			  let that = this
			  uni.getSystemInfo({
				success(res) {
				  that.windowHeight = res.windowHeight
				},
			  })
			},
			handleToLogin(){
				uni.navigateTo({
					url:'/pages/user/mobile-login'
				})
			},
			handleNav(item) {
				uni.navigateTo({url: '/user-page/' + item.url + '?title=' + item.name})
			},
			handleMenu(e) {
				uni.navigateTo({url: '/user-page/' + e.name})
			},
			getUserInfo() {
				if(this.mobile) {
					uni.navigateTo({url: '/user-page/personal-info'})
				}
				
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: '13879138888'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content {
	padding: 30rpx;
	
	.user-info {
		color: #fff;
		display: flex;
		align-items: center;
		
		.info-center {
			padding-left: 20rpx;
			flex: 1;
			font-size: 36rpx;
			color: #1A1A1A;
			.points {
				padding-top: 10rpx;
				font-size: 24rpx;
				color: #8C8C8C;
			}
		}
		
		.info-right {
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}

	.my-company, .my-org {
		background-color: rgba(244, 243, 241, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #333;
		
		.right-info {
			color: #FF7602;
		}
	}
	.message-view {
		background-color: #FFEBEA;
		border-radius: 20rpx;
	}
	.nav-view {
		border-radius: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		.menu-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			.menu-name {
				font-size: 24rpx;
				color: #333333;
				height: 50rpx;
				line-height: 50rpx;
			}
		}
	}
	.menu-list {
		border-radius: 20rpx;
		background-color: #fff;
		:deep(.u-cell__left-icon-wrap) {
			.u-iconfont {
				color: #FF7602 !important;
			}
		}
	}
}
</style>
